<template>
  <div class="param-form">
    <!-- 基础参数 -->
    <div class="param-section">
      <h4>基础参数</h4>
      <el-form :model="formData" label-position="top">
        <el-form-item 
          v-for="param in basicParams"
          :key="param.key"
          :label="param.label"
          :required="param.required"
        >
          <component
            :is="getParamComponent(param)"
            v-model="formData[param.key]"
            v-bind="param.props || {}"
            @change="handleParamChange(param.key)"
          />
          <div class="param-help" v-if="param.description">
            <el-tooltip :content="param.description">
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </div>
        </el-form-item>
      </el-form>
    </div>

    <!-- 高级参数 -->
    <div v-if="advancedParams.length" class="param-section">
      <el-collapse>
        <el-collapse-item title="高级参数">
          <el-form :model="formData" label-position="top">
            <el-form-item
              v-for="param in advancedParams"
              :key="param.key"
              :label="param.label"
              :required="param.required"
            >
              <component
                :is="getParamComponent(param)"
                v-model="formData[param.key]"
                v-bind="param.props || {}"
                @change="handleParamChange(param.key)"
              />
              <div class="param-help" v-if="param.description">
                <el-tooltip :content="param.description">
                  <el-icon><InfoFilled /></el-icon>
                </el-tooltip>
              </div>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { InfoFilled } from '@element-plus/icons-vue'

const props = defineProps<{
  modelValue: Record<string, any>
  template: any
}>()

const emit = defineEmits(['update:modelValue', 'change'])

// 表单数据
const formData = ref({ ...props.modelValue })

// 监听外部数据变化
watch(() => props.modelValue, (newVal) => {
  formData.value = { ...newVal }
}, { deep: true })

// 监听内部数据变化
watch(formData, (newVal) => {
  emit('update:modelValue', newVal)
}, { deep: true })

// 获取基础参数
const basicParams = computed(() => {
  return props.template?.param_schema?.basic || []
})

// 获取高级参数
const advancedParams = computed(() => {
  return props.template?.param_schema?.advanced || []
})

// 获取参数对应的组件
const getParamComponent = (param: any) => {
  const componentMap: Record<string, string> = {
    'TextArea': 'el-input',
    'NumberInput': 'el-input-number',
    'Select': 'el-select',
    'Slider': 'el-slider',
    'Switch': 'el-switch',
    'ImageUpload': 'ImageUploader',
    'SeedInput': 'SeedInput'
  }

  return componentMap[param.component] || 'el-input'
}

// 处理参数变化
const handleParamChange = (key: string) => {
  emit('change', { key, value: formData.value[key] })
}
</script>

<style scoped>
.param-form {
  padding: 16px;
}

.param-section {
  margin-bottom: 24px;
}

.param-section h4 {
  margin: 0 0 16px;
  color: var(--el-text-color-primary);
}

.param-help {
  display: inline-flex;
  margin-left: 8px;
  color: var(--el-text-color-secondary);
  cursor: help;
}

:deep(.el-form-item) {
  margin-bottom: 16px;
}

:deep(.el-form-item__label) {
  padding-bottom: 4px;
}
</style> 